@extends('layouts._app')
@section('content')
    <link rel="stylesheet" href="{{asset('static/ace/assets/css/ace.min.css')}}"/>
    <style>
        html {
            background-color: #fff;
        }
    </style>
    <body>
    <div class="page-content-wrap" style="background-color: #fff;">
        @include('layouts._flash')
        <div class="layui-form-item">
            {!! Form::open(['class'=>'layui-form','method'=>'get']) !!}
            <div class="layui-inline tool-btn">
                <a class="layui-btn layui-btn-small layui-btn-primary" id='email-refresh-btn'
                   href="{{route('system.permission.index')}}" data-title='刷新'>
                    <i class="layui-icon">&#x1002;</i>
                </a>
                <button class="layui-btn layui-btn-small layui-btn-normal addBtn hidden-xs"
                        data-title="菜单添加"
                        data-url="{{route('system.permission.create')}}"><i
                        class="layui-icon">&#xe654;</i></button>
            </div>
            <div class="layui-input-inline" style="float: right;">
                <select id="change_category" lay-filter="category" lay-search data-id="permissions">
                    <option selected>下载</option>
                    <option>.txt</option>
                    <option>.xlsx</option>
                </select>
            </div>
            {!! Form::close(); !!}
        </div>
        <div id="table-list" class="col-lg-12">
            <div class="dd" id="nestable" style="max-width: 900px;">
                <ol class="dd-list" id="dd-list">
                    @foreach($permissions as $permission)
                        <li class="dd-item dd2-item" data-id="{{$permission->id}}">
                            <div class="dd-handle dd2-handle">
                                <i class="@if($permission->icon){{$permission->icon}} @else fa fa-arrows @endif"></i>
                            </div>
                            <div class="dd2-content">
                                {{$permission->name}}&nbsp;&nbsp;&nbsp;({{$permission->label}})
                                <div class="pull-right action-buttons">
                                    <button class="layui-btn layui-btn-mini layui-btn-normal add-btn"
                                            data-id="{{$permission->id}}" data-title="菜单新增"
                                            data-url="{{route('system.permission.create')}}?id={{$permission->id}}">
                                        <i class="layui-icon">&#xe654;</i></button>
                                    <button class="layui-btn layui-btn-mini layui-btn-normal  edit-btn"
                                            data-id="{{$permission->id}}" data-title="菜单编辑"
                                            data-url="{{route('system.permission.edit',$permission->id)}}"><i
                                            class="layui-icon">&#xe642;</i></button>
                                    @if($permission->children->isEmpty())
                                        <a class="layui-btn layui-btn-mini layui-btn-danger"
                                           href="{{route('system.permission.destroy',$permission->id)}}"
                                           data-method="delete"
                                           data-token="{{csrf_token()}}" data-confirm="确认删除吗?"><i
                                                class="layui-icon">&#xe640;</i></a>
                                    @endif
                                </div>
                            </div>
                            @if(!$permission->children->isEmpty())
                                <ol class="dd-list">
                                    @foreach($permission->children as $children)
                                        <li class="dd-item dd2-item" data-id="{{$children->id}}">
                                            <div class="dd-handle dd2-handle">
                                                <i class="@if($children->icon){{$children->icon}} @else fa fa-arrows @endif"></i>
                                            </div>
                                            <div class="dd2-content">
                                                {{$children->name}}&nbsp;&nbsp;&nbsp;({{$children->label}})
                                                <div class="pull-right action-buttons">
                                                    <button class="layui-btn layui-btn-mini layui-btn-normal add-btn"
                                                            data-id="{{$children->id}}" data-title="菜单新增"
                                                            data-url="{{route('system.permission.create')}}?id={{$children->id}}">
                                                        <i
                                                            class="layui-icon">&#xe654;</i></button>
                                                    <button class="layui-btn layui-btn-mini layui-btn-normal  edit-btn"
                                                            data-id="{{$children->id}}" data-title="菜单编辑"
                                                            data-url="{{route('system.permission.edit',$children->id)}}">
                                                        <i
                                                            class="layui-icon">&#xe642;</i></button>
                                                    @if($children->children->isEmpty())
                                                        <a class="layui-btn layui-btn-mini layui-btn-danger"
                                                           href="{{route('system.permission.destroy',$children->id)}}"
                                                           data-method="delete"
                                                           data-token="{{csrf_token()}}" data-confirm="确认删除吗?"><i
                                                                class="layui-icon">&#xe640;</i></a>
                                                    @endif
                                                </div>
                                            </div>
                                            @if(!$children->children->isEmpty())
                                                <ol class="dd-list">
                                                    @foreach($children->children as $c)
                                                        <li class="dd-item dd2-item" data-id="{{$c->id}}">
                                                            <div class="dd-handle dd2-handle">
                                                                <i class="@if($c->icon){{$c->icon}} @else fa fa-arrows @endif"></i>
                                                            </div>
                                                            <div class="dd2-content">
                                                                {{$c->name}}&nbsp;&nbsp;&nbsp;({{$c->label}})
                                                                <div class="pull-right action-buttons">
                                                                    <button
                                                                        class="layui-btn layui-btn-mini layui-btn-normal  edit-btn"
                                                                        data-id="{{$c->id}}" data-title="菜单编辑"
                                                                        data-url="{{route('system.permission.edit',$c->id)}}">
                                                                        <i
                                                                            class="layui-icon">&#xe642;</i></button>
                                                                    <a class="layui-btn layui-btn-mini layui-btn-danger"
                                                                       href="{{route('system.permission.destroy',$c->id)}}"
                                                                       data-method="delete"
                                                                       data-token="{{csrf_token()}}"
                                                                       data-confirm="确认删除吗?"><i
                                                                            class="layui-icon">&#xe640;</i></a>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                </ol>
                                            @endif
                                        </li>
                                    @endforeach
                                </ol>
                            @endif
                        </li>
                    @endforeach
                </ol>
            </div>
        </div>

    </div>
    <script src="{{asset('static/admin/layui/layui.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('static/admin/js/common.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('js/jquery.min.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('js/destroy.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('js/common.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{asset('static/ace/assets/js/bootstrap.min.js')}}"></script>
    <script src="{{asset('static/ace/assets/js/jquery.nestable.min.js')}}"></script>
    <script>
        /**
         * 排序功能
         */
        jQuery(function ($) {
            $('.dd-handle a').on('mousedown', function (e) {
                e.stopPropagation();
            });
            $('[data-rel="tooltip"]').tooltip();
            var dd = $('.dd');
            dd.nestable('expandAll');//展开所有节点
            dd.nestable('collapseAll');//折叠所有节点
            dd.nestable().on('change', function () {
                var r = dd.nestable('serialize');
                var sort = JSON.stringify(r);    //改变排序之后的数据
                $.ajax({
                    type: 'post',
                    url: '{{route('system.permission.sort')}}',
                    data: {sort: sort, filter: true},
                    dataType: "json",
                    beforeSend: function () {
                        layer.load(1, {
                            shade: [0.1, '#333333'] //0.1透明度的白色背景
                        });
                    },
                    error: function (xhr) {//获取ajax的错误信息
                        layer.alert(xhr.responseText, "Failed", function () {
                            layer.closeAll();
                        });
                    },
                    complete: function (XHR) {
                        XHR = null;
                    },
                    success: function (msg) {
                        layer.closeAll();
                        if (msg.code == 403) {
                            layer.msg(msg.msg, {icon: 4, time: 3000}, function () {
                                location.reload();
                            });
                        }
                        if (msg.code != 200) {
                            layer.msg(msg.msg, {icon: 5, time: 3000}, function () {
                                location.reload();
                            });
                        }
                        layer.msg(msg.msg, {icon: 1, time: 1000}, function () {
                            location.reload();
                        });
                    }
                })
            });

        });

        layui.use(['jquery', 'dialog', 'form'], function () {
            var $ = layui.jquery;
            var dialog = layui.dialog;
            var form = layui.form();

            //监听提交
            form.on('submit(formDemo)', function (data) {
            });

            form.on('select(category)', function (e) {
                if (e.value == '下载') {
                    return false;
                }
                /**
                 * 写入文件下载
                 * @param id
                 */
                var table = $("#change_category").data('id');
                var ext = e.value;
                dialog.confirm({
                    message: '这可能会耗费很长时间！是否继续',
                    success: function () {
                        window.open('{{route('TextFile')}}' + '?table=' + table + '&ext=' + ext, '_parent');
                        window.location.reload();
                    },
                });
            });

            form.render();
        });

    </script>
    </body>
@endsection
